<template>
  <div class="user-list">

    <!-- 用户表格数据 -->
    <el-table :data="getBackstageTableList" border style="width: 100%;
    margin-top: 20px;">
      <el-table-column prop="uid" label="uid" width="80"></el-table-column>
      <el-table-column prop="account" label="账号" width="100"></el-table-column>
      <el-table-column prop="add_time" label="添加时间" width="150"></el-table-column>
      <el-table-column prop="" label="头像" width="100">
        <template slot-scope="scope">
          <div style="width:80px;height:80px;border-radius:50%;overflow:hidden;">
            <img style="width:100%;height:100%;" :src="scope.row.avatar?scope.row.avatar:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1474974799,947065524&fm=26&gp=0.jpg'" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="100"></el-table-column>
      <el-table-column prop="phone" label="电话" width="100"></el-table-column>
      <el-table-column prop="role" label="角色名字" width="100"></el-table-column>
      <el-table-column prop="" label="账号状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="statusListTabs[scope.row.status].type">
            <i :class="statusListTabs[scope.row.status].icon"></i>
            {{statusListTabs[scope.row.status].label}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="user_role" label="角色编号" width="50">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="editAdmin(scope.row.uid,scope.row.nickname);editDialogFormVisible=true" style="float:left" type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button v-has:delete="$route" size="mini" @click="removeAdmin(scope.row.uid,scope.row.nickname)" style="float:left" type="danger" icon="el-icon-delete">删除</el-button>
          

    <!-- 编辑用户的模态框 -->
    <el-dialog :model="false" :visible.sync="editDialogFormVisible">
      <el-form>
        编辑模态框
      </el-form>
    </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: ["status"],
  data() {
    return {
      editDialogFormVisible: false,
      statusListTabs:[
        {
          icon:"el-icon-time",
          type:"",
          label: '待激活',
          status: '0'
        },
        {
          icon:"el-icon-success",
          type:"success",
          label: '正常',
          status: '1'
        },
        {
          icon:"el-icon-lock",
          type:"warning",
          label: '已锁定',
          status: '2'
        },
        {
          icon:"el-icon-circle-close",
          type:"info",
          label: '已停用',
          status: '3'
        },
        {
          icon:"el-icon-delete",
          type:"danger",
          label: '已注销',
          status: '4'
        }
      ]
    }
  },
  methods: {
    removeAdmin (uid, nickname) {
      // console.log(uid)
      // this.$http.removeMan()
      this.$confirm('确定要删除 '+nickname+' 吗?', '删除提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        console.log(uid)
        this.$http.removeMan({ uid }).then(res => {
          if( res.data.code == 200 ){
            console.log(res,'删除成功')
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除失败(可能是权限不够)'
            })
          }
        }).catch(err => {
          console.log(err,'删除失败')
        })
      }).catch(err => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },
    editAdmin (uid, nickname) {
      console.log('编辑用户'+nickname)
    }
  },
  updated() {
  },
  beforeRouteEnter (to, from, next) {
    console.log('进入组件')
    next()
  },
  computed: {
    ...mapGetters('user',[
      'getBackstageTableList'
    ])
  }
};
</script>

<style scoped lang="less">
</style>